<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>HTML Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
            color: var(--main_color);
        }

        body {
            background: var(--bg_color);
        }

        a:hover {
            background: #000;
            color: red;
        }

        :root {
            --bg_color: #3a3535;
            --main_color: #cdbdbd;
        }

        /*  这种清除浮动的方式是最为推荐的, 用的人也是最多,  不推荐 overflow ：hidden , 父元素不能使用定位    */
        .clearfix::after {
            content: '';
            display: table;
            clear: both;
        }

        .wfull {
            width: 100%;
        }

        .hfull {
            height: 100%;
        }

        .obc {
            object-fit: cover;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .hidden {
            display: none;
        }

        .btn-edit {
            font-size: 18px;
            border: 1px solid rgb(61, 140, 230);
            padding: 8px;
            padding-left: 18px;
            padding-right: 18px;
            margin-right: 12px;
            background: #000;
            cursor: pointer;
            color: aliceblue;
            /* display: none; */
        }

        .btn-del {
            font-size: 18px;
            border: 2px dotted red;
            padding: 8px;
            cursor: pointer;
            color: red;
        }

        .item a:hover {
            color: green;
        }

        .item:hover .btn-edit {
            display: inline-block;
        }

        textarea {
            font-weight: bolder;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            width: 100%;
            height: 666px;
            padding: 16px;
            color: #000;
            font-size: 28px;

        }
    </style>
</head><body>
    
    <h1>index.html </h1>


    <style>
        .img-wrapper {
            /*    这里调整瀑布流的列数     */
            column-count: 3;
            column-gap: 10px;
            counter-reset: count;
            margin: 0 auto;
        }
        .img-wrapper li {
            break-inside: avoid;
            border: 2px solid rgb(125, 117, 117);
            padding: 16px;
        }
        .img-wrapper>li>button:hover {
            background: #000;
            color: white;
        }

        .img-wrapper>li>button {
            font-size: 26px;
            padding: 5px;
            background: none;
            border: none;
            border: 2px solid lightcyan;
            ;
            cursor: pointer;
        }

        .img-wrapper li a {
            position: relative;
            margin-bottom: 10px;
        }

        .img-wrapper li a img {
            width: 100%;
            height: auto;
            vertical-align: middle;
        }

        .img-wrapper>li::after {
            counter-increment: count;
            content: counter(count);
            width: 2em;
            height: 2em;
            background-color: rgba(0, 0, 0, 0.9);
            color: #ffffff;
            line-height: 2em;
            text-align: center;
            position: absolute;
            font-size: 1em;
            z-index: 2;
            left: 0;
            top: 0;
        }

        #edit-modal {
            width: 100%;
            background: #e6dede;
            padding: 12px;
            position: fixed;
            top: 0;
            bottom: 0;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .gdsfgsegsfsergferg a {
            font-size: 32px;
            margin: 10px;
        }
    </style>


    <div class="gdsfgsegsfsergferg">
        <a target="_blank" href="/mysql"> 测试 mysql connect </a>
        <a target="_blank" href="/ajax"> Ajax 测试 </a>
        <a target="_blank" href="/add"> Add </a>
        <a target="_blank" href="/name/传参"> 传参 测试 </a>
        <a href="/index/collected"> collected </a>
        <a href="/index/haveImg"> haveImg </a>
        <a href="/index/all"> All (全部) </a>
        <a href="/index/test"> Test (测试) </a>
    </div>
    <div style="display: flex;  ">
        <h2>返回结果集 : </h2>
        <h2> {{ return_size|safe }} </h2>
    </div>
    <h1> {{title}}</h1>
    <h3> {{key}} </h3>


    <style>
        .edit-modal-close-btn1 {
            width: 66px;
            height: 66px;
            font-size: 66px;
            color: red;
            border: 5px solid red !important;
            background: none;
            font-size: 26px;
            cursor: pointer;
            border: none;
            position: fixed;
            top: 20px;
            right: 20px;
        }
        .edit-modal-update-btn2:hover {
            background: #000;
            color: #e6dede;
            cursor: pointer;
        }
        .edit-modal-update-btn2 {
            padding: 12px;
            font-size: 32px;
            color: #000;
        }
    </style>

    <h1>Ctrl + F5 强刷新 : </h1>
    <!-- <img src="/static/img/111.png" alt=""> -->

    <div id="app">
        
        [[aaa]]

        <ul class="img-wrapper">
            <li v-for="(value, key) in file_objs" :key="key" class="item">
                <a :href="'/html/' + key + '.html' " target="_blank">
                    <!-- <img src="/static/img/111.png" alt=""> -->
                    <img :src="'/static/img/' + key + '.png'" alt="">
                    <p style="font-size: 26px;"> [[ value ]] </p>
                    <p style="font-size: 14px;"> [[ key ]] </p>
                </a>
                <button class="btn-edit " @click="edit_file(key)">Edit</button>
            </li>
        </ul>


        <!--   hidden     edit  修改   -->
        <div id="edit-modal" class="modal    hidden       ">
            <h1 style="color: #000;" id="file_name_id">[[file_name_id]]</h1>
            <button class="edit-modal-close-btn1" onclick="close_edit_modal()"> x </button>
            <button class="edit-modal-update-btn2" @click="update_file()"> Update </button> &nbsp;
            <button class="edit-modal-update-btn2" @click="Add_tags(' --collected')">
                <?xml version="1.0" encoding="UTF-8"?> <svg width="22" viewBox="0 0 48 48" fill="red" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.9986 5L17.8856 17.4776L4 19.4911L14.0589 29.3251L11.6544 43L23.9986 36.4192L36.3454 43L33.9586 29.3251L44 19.4911L30.1913 17.4776L23.9986 5Z" stroke="red" fill="none" stroke-width="4" stroke-linejoin="round" />
                </svg>
            </button> &nbsp;
            <button class="edit-modal-update-btn2" @click="Add_tags(' --haveImg')">
                <?xml version="1.0" encoding="UTF-8"?><svg width="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M38 21V40C38 41.1046 37.1046 42 36 42H8C6.89543 42 6 41.1046 6 40V12C6 10.8954 6.89543 10 8 10H26.3636" stroke="#300b0b" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M12.0005 31.0308L18.0005 23L21.0005 26L24.5005 20.5L32.0005 31.0308H12.0005Z" fill="none" stroke="#300b0b" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M34.0005 10H42.0005" stroke="#300b0b" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M37.9946 5.79541V13.7954" stroke="#300b0b" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button> &nbsp;
            <button class="edit-modal-update-btn2" @click="Add_tags(' --TEST')">TEST(测试)</button>

            <h2 style="color: #000;">描述 describe : </h2>
            <input id="" v-model="describe" style="padding: 8px; width:92%; font-size: 26px; color: black;">
            <br><br>
            <input type="file" name="" id="myfile" style="font-size: 30px; color: black; ">
            <br><br>
            <textarea name="" id="" v-model="file_content">  [[file_content]]  </textarea>

            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <a class="btn-del " :href="'/delete_file/' + file_name_id  " target="_blank">Delete</a>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>

    </div>

    <br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br>
</body>

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.15/vue.global.min.js" type="application/javascript"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.3/jquery.min.js" type="application/javascript"></script>
<script>
    console.log("遍历文件 :  ");
    var files = '{{ file_list|safe  }}'
    var return_size = '{{ return_size|safe  }}'
    console.log(return_size);
    let file_objs = JSON.parse(files);
    console.log(file_objs);
    console.log("key:value 遍历 : ");
    for (var key in file_objs) {
        if (file_objs.hasOwnProperty(key)) {
            let value = file_objs[key];
            console.log(key + "  ==>  " + value);
        }
    }

    function test(params) {
        alert("testttttttttt")
    }

    function close_edit_modal(params) {
        document.getElementById("edit-modal").classList.toggle("hidden")
    }

    const { createApp } = Vue
    // 为了防止和 django 里面的内置模板标签冲突, 双括号 改为 双方括号
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                aaa: 1111,
                test_list: ["a111", "b222", "c3333"],
                file_content: "",
                file_name_id: "",
                file_objs: file_objs,
                describe: "",
                // message: data.title,
                // article: data
            }
        },
        methods: {
            add: function () {
                alert("哈哈哈哈 233333333")
            },
            go_href: function (eee) {
                return '/html/' + eee + ".html"
            },
            delete_file: function (eee) { },
            Add_tags: function (eee) {
                console.log("Add_tags   ");
                console.log(eee);
                console.log(this.file_name_id);
                let aaa = this.describe;
                if (aaa.includes(eee)) {
                    aaa = aaa.replace(new RegExp(eee, "g"), "");
                } else {
                    aaa = aaa + eee
                }
                this.describe = aaa
            },
            update_file: function () {
                console.log(this.file_name_id);
                console.log(this.describe);
                console.log(this.file_content);
                // return false;
                if (this.describe.length < 2 || this.file_content.length < 12) {
                    alert("describe 或 file_content 参数缺失 ~  ")
                    return false;
                }
                var fileInput = document.getElementById("myfile");
                var file = fileInput.files[0];
                // return false;
                // 文件为空 : 
                // if (file === undefined) {  alert(" 文件不能为 null ... ");  return false;  }
                var formData = new FormData();
                formData.append("file_name_id", this.file_name_id);
                formData.append("describe", this.describe.trim());
                formData.append("file_content", this.file_content);
                formData.append("myfile", file);
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/update_file_data/", true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // 请求成功的处理逻辑
                        console.log(xhr.responseText);
                        location.reload();
                    }
                };
                xhr.send(formData);
            },
            edit_file: function (eee) {
                console.log(eee);
                this.file_name_id = eee;
                this.get_file_data(eee)
            },
            get_file_data: function (file_name) {
                let this_ = this;
                $.ajax({
                    type: "POST",
                    url: "/get_file_data/",
                    data: {
                        "file_name": file_name,
                    },
                    datatype: "json",
                    success: function (ret) {
                        this_.file_content = ret.html_data;
                        this_.describe = ret.describe;
                        document.getElementById("edit-modal").classList.toggle("hidden");
                    },
                    //调用出错执行的函数
                    error: function () {
                        //请求出错处理
                    }
                })
            },

        }
    }).mount('#app')





    // console.log(JSON.parse(files));
</script>

</html>